<template>
  <div class="playback">
    <div class="tableGrid">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="fileName" label="文件名称" width="260"></el-table-column>
        <el-table-column prop="fileType" label="文件类型" width="180"></el-table-column>
        <el-table-column
          prop="createTime"
          label="上传时间"
          width="220"
          :formatter="formatterUploadTime"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >移除</el-button>
            <el-button
              @click.native.prevent="playVideo(scope.$index, tableData)"
              type="text"
              size="small"
            >播放</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="gridTotal"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="currentChange"
        @prev-click="currentChange"
        @next-click="currentChange"
      ></el-pagination>
    </div>

    <div class="video-play">
      <video width="400" height="300" controls="controls" ref="video">
        <source :src="videoPlay" type="video/mp4" />
        <p class="warning">Your browser does not support HTML5 video.</p>
      </video>
    </div>
  </div>
</template>

<script>
import { fetchGet } from "../../../https";
import API from "../../../utils/API";

export default {
  name: "Playback",
  data() {
    return {
      gridTotal: 0,
      pageSize: 5,
      currentPage: 1,
      tableData: [],
      videoPlay: ""
    };
  },
  mounted() {
    this.initGridData();
  },
  methods: {
    initGridData() {
      let videoList = fetchGet(API.VIDEO_VIDEO_LIST, {
        pageNum: this.currentPage,
        pageSize: this.pageSize
      });
      videoList.then(res => {
        this.gridTotal = res.data.total;
        this.tableData = res.data.list;
        this.$refs.video.src =
          API.VIDEO_PLAY_VIDEO + "?name=" + this.tableData[0].fileName;
      });
    },
    deleteRow() {
    },
    currentChange(page) {
      this.currentPage = page;
      this.initGridData();
    },
    playVideo(index, tableData) {
      let data = tableData[index];
      this.$refs.video.src = API.VIDEO_PLAY_VIDEO + "?name=" + data.fileName;
    },
    formatterUploadTime(row) {
      let data = new Date(row.createTime);
      return (
        data.getFullYear() +
        "-" +
        (data.getMonth() + 1 < 10
          ? "0" + (data.getMonth() + 1)
          : data.getMonth() + 1) +
        "-" +
        data.getDate() +
        " " +
        data.getHours() +
        ":" +
        data.getMinutes() +
        ":" +
        data.getSeconds()
      );
    }
  }
};
</script>

<style scoped>
.playback {
  display: flex;
}
</style>
